<template>
  <main-layout
    :showHome="!isFromList"
    :showBack="isFromList"
    :title="`${isEdit ? '修改' : '新增'}项目`"
  >
    <div class="form-box">
      <van-form @submit="onSubmit">
        <div class="title">基本信息</div>
        <van-field
          v-model="proObj.name"
          label="项目名"
          placeholder="请输入项目名"
          :rules="[{ required: true, message: '请填写项目名' }]"
        />
        <van-field
          v-model="proObj.signTime"
          label="签订日期"
          placeholder="请选择签订日期"
          :rules="[{ required: true, message: '请选择签订日期' }]"
        >
          <template #button>
            <van-button
              block
              type="info"
              color="#ff5b02"
              native-type="button"
              @click="showTimeSelect = true"
              >选择日期</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="addressArr"
          label="地市"
          placeholder="请选择地市"
          :rules="[{ required: true, message: '请选择地市' }]"
        >
          <template #button>
            <van-button
              block
              type="info"
              color="#ff5b02"
              native-type="button"
              @click="showCitySelect = true"
              >选择地市</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="proObj.address"
          label="详细地址"
          placeholder="请输入详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <van-field
          v-model="proObj.liableName"
          label="负责人"
          placeholder="请选择负责人"
          :rules="[{ required: true, message: '请选择负责人' }]"
        >
          <template #button>
            <van-button
              block
              type="info"
              color="#ff5b02"
              native-type="button"
              @click="searchUser()"
              >选择负责人</van-button
            >
          </template>
        </van-field>
        <!-- 2 业主信息 -->
        <div class="title">业主信息</div>
        <van-field
          v-model="proObj.ownerName"
          label="业主"
          placeholder="请输入业主"
          :rules="[{ required: true, message: '请填写业主' }]"
        />

        <van-field
          v-model="proObj.ownerAddress"
          label="业主地址"
          placeholder="请输入业主地址"
          :rules="[{ required: true, message: '请填写业主地址' }]"
        />
        <van-field
          v-model="proObj.ownerPhone"
          label="业主电话"
          placeholder="请输入业主电话"
          :rules="[
            { required: true, message: '请填写业主电话' },
            { pattern: /^1[3-9]{1}[0-9]{9}/, message: '请输入正确的手机号' },
          ]"
        />
        <!-- 备注 -->
        <div class="title">备注</div>
        <van-field
          v-model="proObj.remark"
          label="备注"
          placeholder="请输入备注"
        />
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
        <!-- 时间弹出层 -->
        <van-popup
          v-model="showTimeSelect"
          position="bottom"
          :style="{ height: '40%' }"
          :close-on-click-overlay="false"
        >
          <van-datetime-picker
            v-model="signTime"
            type="datetime"
            title="选择年月日"
            @cancel="showTimeSelect = false"
            @confirm="timeOk"
          />
        </van-popup>
        <!-- 地市弹出层 -->
        <van-popup
          v-model="showCitySelect"
          position="bottom"
          :style="{ height: '40%' }"
          :close-on-click-overlay="false"
        >
          <van-area
            title="选择地市"
            :area-list="areaList"
            @cancel="showTimeSelect = false"
            @confirm="cityOk"
          />
        </van-popup>
        <!-- 负责人弹出层 -->
        <van-popup
          v-model="showOwnerSelect"
          position="right"
          :style="{ height: '100%', width: '70%' }"
        >
          <div class="searchSelect">
            <div class="owner">
              <input type="text" v-model="pages.name" placeholder="输入负责人名字搜索" />
              <button type="button" @click="searchUser(true)">搜索</button>
            </div>
            <ul @scroll="scrollEvt">
              <li v-for="item in userList" :key="item.id" @click="clickOwner(item)">{{item.name}}-{{item.dept}}-{{item.duties}}</li>
              <li>{{loading?'加载中...':hasMore?'下滑获取更多':'我也是有底线的！'}}</li>
            </ul>
          </div>
        </van-popup>
      </van-form>
    </div>
  </main-layout>
</template>

<script>
import { timeFormat } from "../../../utils"
import { areaList } from "@vant/area-data"
import { projectSaveApi, userListApi } from '../../apis/projectApi' 
export default {
  data() {
    return {
      areaList,
      isFromList: false,
      isEdit: false,
      proObj: {
        name: "",
        liableId: "",
        liableName: "",
        signTime: "",
        province: "",
        city: "",
        county: "",
        address: "",
        ownerId: "",
        ownerName: "",
        ownerAddress: "",
        ownerPhone: "",
        remark: "",
      },
      showTimeSelect: false,
      showCitySelect: false,
      showOwnerSelect: false,
      signTime: new Date(),
      addressArr: "",
      pages:{
          name: '',
          page: 1,
          size: 20
      },
      userList: [],
      loading: false,
      hasMore: true
    };
  },

  created() {
    this.isFromList = !!this.$route.query.from;
    console.log('this.isFromList',this.isFromList)
    this.isEdit = !!this.$route.query.id;
  },

  methods: {
    async onSubmit() {
      // console.log(this.proObj)
      let result = await projectSaveApi(this.proObj)
      if(result.code == 200){
        this.$toast.success('保存成功')
      }else{
        this.$toast.fail('保存失败')
      }
    },
    timeOk(val) {
      this.proObj.signTime = timeFormat(val);
      this.showTimeSelect = false;
    },
    cityOk(val) {
      let arr = [];
      val.forEach((it) => {
        arr.push(it.name);
      });
      // debugger;
      this.proObj.province = arr[0];
      this.proObj.city = arr[1];
      this.proObj.county = arr[2];
      this.addressArr = arr.join("/");
      this.showCitySelect = false;
      // console.log(val);
    },
   
    //获取用户信息
    async getUserList() {  
        let result = await userListApi(this.pages)
        // console.log(result.data.rows)
        // this.userList.push(result.data.rows) 
        this.userList = [...this.userList,...result.data.rows]
        if(this.size >= result.data.rows.length)    this.hasMore = false
        //判断是否还有更多数据
        this.hasMore = this.pages.page * this.pages.size < result.data.total
        // if(this.pages.page * this.pages.size < result.data.total){
        //     this.hasMore = true
        // }else{
        //     this.hasMore = false
        // }
        setTimeout(() => {
            this.loading = false
        });
    },
    //滚动事件
    scrollEvt(event) {
        // console.log(event.target.offsetHeight,event.target.scrollTop,event.target.scrollHeight)
        let isBottom = event.target.offsetHeight + event.target.scrollTop  < event.target.scrollHeight-20
        //如果到底部了，就判断
        if(!this.loading && this.hasMore && isBottom){        
          this.pages.page += 1
          this.loading = true
          this.getUserList()
        }
    },
    //获取负责人
    searchUser(flag){
      //把list置空，page为1
      this.userList = []
      this.pages.page = 1
      this.loading = true
      this.getUserList()
      if(!flag){
        this.pages.name = ''
        this.showOwnerSelect = true
      }
    },
    clickOwner(val){
      // debugger;
      this.proObj.liableName = val.name
      this.proObj.liableId = val.id
      // console.log(val)
      // console.log(this.proObj.liableName)
    }

  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.form-box {
  padding: 10px;
  .title {
    font-size: 0.7rem;
    color: gray;
    line-height: 1.2rem;
    margin: 8px 0;
  }
  .van-cell {
    padding: 10px;
  }

  .searchSelect {
    height: 100%;
    .owner {
      padding: 10px;
      display: block;
      position: relative;
      display: flex;
      > input {
        outline: none;
        border: none;
        font-size: 0.7rem;
        height: 32px;
        flex: 1;
        border-bottom: 1px solid gray;
      }
      > button {
        flex: 0 0 60px;
        height: 32px;
        border: none;
        background-color: rgb(233, 130, 71);
        border-radius: 5px;
        color: white;
        font-size: 0.7rem;
      }
    }

    ul{
        display: block;
        padding: 10px;
        height: calc(100% - 72px);
        overflow-x: hidden;
        li{
            font-size: .7rem;
            border-bottom: solid 1px rgb(204, 209, 211);
            padding: 6px;
            &:last-child{
                border-bottom: 0;
                text-align: center;
                margin: 10px 0;
                font-size: .6rem;
            }
        }
    }
  }
}
</style>